<template>
  <view class="icon-container">
    <navbar :title="category ? category.title : ''"></navbar>
    <view class="bg"></view>
    <TiyanDialog :bottom="true"></TiyanDialog>
    <view class="list-container" v-if="category">
      <view class="item" v-for="item in category.signIcons" :key="item.id" @click="toDetail(item.id)">
        <image class="img" mode="aspectFit" :src="item.img"></image>
        <view class="title">{{ item.title }}</view>
        <view class="question" v-if="item.count">相关试题 {{ item.count }}题</view>
      </view>
    </view>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapActions} from 'vuex'
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    navbar
  },
  data() {
    return {
      kemu: null,
      category: null
    }
  },
  async onLoad({id, kemu}) {
    this.cateId = id
    this.kemu = kemu
    this.category = await this.signCategoryInfo(id)
  },
  methods: {
    ...mapActions('question', ['signCategoryInfo']),
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/icon_detail/icon_detail?cateId=' + this.cateId + '&id=' + id + '&kemu=' + this.kemu
      });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f3fb;
}
::v-deep .top-bar.white {
  background-color: transparent;
}
.bg {
  width: 750rpx;
  height: 762rpx;
  background-image: url("@/static/icon/chelun_bg.png");
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
}
.icon-container {
  display: flex;
  flex-direction: column;
  position: relative;

  .list-container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10rpx;
    margin-top: 130rpx;

    .item {
      width: 332upx;
      margin-left: 22rpx;
      margin-bottom: 24rpx;
      border-radius: 32rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
      background-color: #fff;
      padding-bottom: 34rpx;

      .img {
        margin-top: 34upx;
        width: 192upx;
        height: 192upx;
      }

      .title {
        font-size: 34upx;
        color: rgba(52, 60, 90, 1);
        font-weight: bold;
        margin-top: 24upx;
        text-align: center;
      }

      .question {
        color: rgba(2, 202, 132, 1);
        font-size: 28upx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16upx;
      }
    }
  }
}
</style>
